import { Button, Form, Input, Select, Drawer, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { delshopAPI, pageAPI } from '../dom/httpAPI';
import Mydia from '../component/Mydia';
const Manage: React.FC = () => {
    //搜索
    const onFinish = async (values: any) => {
        console.log('Success:', values);
        // 使用pageAPI并重置到第一页
        const res = await pageAPI({
            page: 1,
            size: 2,
            ...values
        });
        setList(res.data);
    }
    const [title, setTitle] = useState('')
    const [obj, setobj] = useState({})
    const [list, setList] = useState([])
    //获取
    const getpage = async () => {
        let res = await pageAPI({ page: 1, size: 2 })
        setList(res.data)
    }
    useEffect(() => {
        getpage()
    }, [])

    // 分页
    const [form] = Form.useForm();
    const pageonChange = async (page: any, pageSize: any) => {
        const searchValues = form.getFieldsValue();
        const res = await pageAPI({
            page,
            size: pageSize,
            ...searchValues
        });
        setList(res.data);
    };
    const [open, setOpen] = useState(false);
    const onClose = () => {
        setOpen(false);
    };

    const columns: ColumnsType = [
        {
            title: '姓名',
            dataIndex: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: '登录名',
            dataIndex: 'title',
        },
        {
            title: '超级管理员',
            dataIndex: 'collect',
            render: ((collect) => {
                return <Tag color={collect ? "green" : "red"}>
                    {collect ? "是" : "否"}

                </Tag>
            })
        },
        {
            title: '在职状态',
            dataIndex: 'line',
            render: ((line) => {
                return <Tag color={line ? "green" : "red"}>
                    {line ? "是" : "否"}

                </Tag>
            })
        },
        {
            title: '角色',
            dataIndex: 'people',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },

        {
            title: '操作',
            render: (_, record) => (
                <Space size="middle">
                    <Button key="change" onClick={() => {
                        setobj(record)
                        setOpen(true);
                        setTitle("修改")
                    }}>编辑 </Button>
                    <Button key="btn" onClick={async () => {
                        let res = await delshopAPI(record.id)
                        console.log(res);
                        getpage()
                    }}>删除</Button>
                </Space>
            ),
        },
    ];

    return <div>
        <Form
            form={form}
            name="basic"
            style={{ display: "flex", justifyContent: "space-between" }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Form.Item
                style={{ width: "150px" }}
                label="姓名"
                name="like_name"

            >
                <Input />
            </Form.Item>

            <Form.Item
                label="登录名"
                style={{ width: "150px" }}
                name="like_title"
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="角色"
                style={{ width: "150px" }}
                name="like_people"

            >
                <Input />
            </Form.Item>
            <Form.Item
                name="like_collect"
                style={{ width: "250px" }}
                label="是否是超级管理员"
            >
                <Select>
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item
                name="like_line"
                label="是否是在职"
                style={{ width: "150px" }}
            >
                <Select>
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="创建时间"
                style={{ width: "150px" }}
                name="like_createTime"
            >
                <Input />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    按条件搜索
                </Button>
            </Form.Item>
        </Form>
        <Button onClick={() => {
            setOpen(true);
            setTitle("添加")
            setobj({})
        }}>添加</Button>
        <Table columns={columns} dataSource={list.list} rowKey="id" pagination={{ total: list.total, pageSize: 2, current: list.page, onChange: pageonChange, }} />;

        <Drawer title={title} placement="right" onClose={onClose} open={open}>
            <Mydia title={title} onClose={onClose} obj={obj} key={new Date().getTime()} getpage={getpage} />
        </Drawer>
    </div>
}

export default Manage;